<template>
  <view>
    <image src="../../static/mine-bg.png" class="fixed-bg"></image>
    <view class="mine-content-container">
      <uni-nav-bar background-color="transparent" status-bar="true" :border="none">
        <image src="../../static/logo.png" mode="heightFix" style="height: 44px;margin: 0 auto;"></image>
      </uni-nav-bar>
      <view class="mine-info-container">
        <view class="userinfo" @click="gotoLogin">
          <view class="avatar">
            <template v-if="isLogin">
              <image :src="userinfo.avatar" style="border-radius: 50%;width:100%;height: 100%;" v-if="userinfo.avatar">
              </image>
              <uni-icons type="person-filled" size="38" color="#a0a0a0" v-else></uni-icons>
            </template>

          </view>
          <view class="nickname">
            {{isLogin? userinfo.userName:'登录/注册'}}
          </view>
        </view>
        <view class="setting" @click="gotoSetting">
          <uni-icons type="gear" color="white" size="25" style="vertical-align: middle;"></uni-icons>
          账户设置

        </view>
      </view>
      <view class="mine-tabs">
        <view class="tab-item " :class="{'active':tab == item.id}" :key="item.id" @click="selectTab(item.id)"
          v-for="item in tabs">
          {{item.name}}
        </view>
      </view>
      <view class="mine-card-list">
        <view class="mine-card-item" v-for="item in mineCards" :key="item.id">
          <view class="image-container" @click.stop="gotoDetail(item)">
            <image :src="'http://'+(item.frontPostcardUrl || item.frontImgUrl || item.postcard.frontImgUrl )"
              mode="widthFix"></image>
            <button type="default" class="delete-button" @click.stop="deleteCard(item)">删除</button>
          </view>

        </view>
      </view>
    </view>
  </view>

</template>

<script>
  import {
    getUserPostcardList,
    getRelyPostcardList,
    deleteCustomPostcard,
    deleteReplyPostcard
  } from '@/apis/postcard.js'
  import {
    getCollectList,
    deleteCollects
  } from '@/apis/user.js'
  export default {
    data() {
      return {
        isLogin: false,
        tab: 1,
        tabs: [{
          id: 1,
          name: '制作',
          count: 0
        }, {
          id: 4,
          name: '公开',
          count: 0
        }, {
          id: 2,
          name: '收到',
          count: 0,
        }, {
          id: 3,
          name: "收藏",
          count: 0
        }],
        mineCards: [],
        userinfo: {},
        pageIndex: 1
      };
    },
    onShow() {
      this.userinfo = uni.getStorageSync('userinfo') || {}
      if (JSON.stringify(this.userinfo) !== '{}') {
        this.isLogin = true
        this.handleSearch()
      } else {
        this.isLogin = false
        this.$showtoast('请先登录')
      }
    },
    onPullDownRefresh() {
      this.handleSearch()
    },
    methods: {
      selectTab(id) {
        this.tab = id;
        this.handleSearch()
      },
      handleSearch() {
        const id = this.tab;
        if (id == 1) {
          this.getMinePostcards()
        } else if (id == 4) {
          this.getMinePostcards(1)
        } else if (id == 3) {
          this.getMineCollects()
        } else {
          this.getRelyPostcardList()
        }
      },
      deleteCard(item) {
        const contens = ['', '确定删除明信片吗', '确定删除回信吗', '确定取消收藏吗', '确定删除明信片吗']
        const _this = this;
        const handleSucces = function(res) {
          _this.$showtoast('操作成功')
          setTimeout(() => {
            _this.mineCards = []
            _this.handleSearch()
          }, 800)
        }
        uni.showModal({
          title: '提示',
          content: contens[this.tab],
          success: (res) => {
            if (res.confirm) {
              if (this.tab == 1 || this.tab == 4) {
                deleteCustomPostcard(item.id).then(res => {
                  handleSucces()
                })
              } else if (this.tab == 2) {
                deleteReplyPostcard({
                  ids: item.id,
                }).then(res => {
                  handleSucces()
                })
              } else {
                deleteCollects({
                  ids: item.id,
                  userId: this.userinfo.userId
                }).then(res => {
                  handleSucces()
                })
              }

            }
          }
        })
      },
      getMinePostcards(isOpen) {
        let queryParam = {
          userId: this.userinfo.userId,
        }
        if (isOpen) {
          queryParam.isOpen = isOpen;
        }
        getUserPostcardList(queryParam).then(res => {
          this.mineCards = res.rows;
          // this.tabs[0].count = res.total
          uni.stopPullDownRefresh()
        })
      },
      getRelyPostcardList() {
        getRelyPostcardList({
          userId: this.userinfo.userId
        }).then(res => {
          this.mineCards = res.rows;
          this.tabs[1].count = res.total
          uni.stopPullDownRefresh()
        })
      },
      getMineCollects() {
        getCollectList({
          userId: this.userinfo.userId,
        }).then(res => {
          this.mineCards = res.rows;
          this.tabs[2].count = res.total;
          uni.stopPullDownRefresh()
        })
      },
      gotoLogin(callback) {
        if (!this.isLogin) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        } else {
          callback && callback()
        }

      },
      gotoDetail(item) {
        const id = this.tab == 2 ? item.userPostcardId : this.tab == 3 ? item.postcardId : item.id;
        if (this.tab == 3) {
          uni.navigateTo({
            url: '/pages/make/make?modelcardId=' + id
          })
        } else {
          uni.navigateTo({
            url: '/pages/detail/detail?postcardId=' + id
          })
        }

      },
      gotoSetting() {
        this.gotoLogin(() => {
          uni.navigateTo({
            url: '/pages/setting/setting'
          })
        })

      }
    }
  }
</script>

<style lang="scss" scoped>
  .mine-content-container {
    position: absolute;
    height: 100vh;
    width: 100vw;
  }

  .mine-info-container {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .userinfo {
      display: flex;
      gap: 20rpx;
      align-items: center;
    }

    .nickname {
      color: #fff;
      flex: 1;
      max-width: 180rpx;
      word-break: keep-all;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .avatar {
      height: 100rpx;
      width: 100rpx;
      text-align: center;
      line-height: 100rpx;
      background-color: #fff;
      border-radius: 50%;
    }

    .setting {
      margin-left: 10rpx;
      padding: 0 1.8em;
      height: 50rpx;
      font-size: 14px;
      line-height: 50rpx;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 50rpx;
    }
  }

  .mine-tabs {
    margin-top: 40rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 20rpx 20rpx 0 0;
    background-color: #fff;
  }

  .tab-item {
    position: relative;
    color: #626262;

    text {
      margin-left: 8rpx;
      font-weight: bold;
      color: #6ad5cb;
    }


  }

  .active {
    color: #222;
  }

  .active::after {
    content: '';
    display: block;
    position: absolute;
    margin: 8rpx auto;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 10rpx;
    border-radius: 10rpx;
    background-color: #6ad5cb;
  }


  .mine-card-list {
    height: calc(100% - 226px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: start;
    gap: 20rpx;
    padding: 20rpx;
    background-color: #f7f7f7;
    box-sizing: border-box;
    overflow: auto;
  }

  .mine-card-item {
    width: 48%;
    height: 400rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx 20rpx;
    border-radius: 5rpx;
    box-sizing: border-box;
    background-color: #fff;

    .image-container {
      position: relative;
      flex: 1;
      width: 100%;
      max-height: 100%;
      display: flex;
      align-items: center;
    }

    .delete-button {
      position: absolute;
      bottom: 2px;
      right: 5px;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 28rpx;
    }

    image {
      width: 100%;
      max-height: 100%;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30rpx;
      color: #303030;

      text:nth-child(2) {
        font-size: 28rpx;
      }

      .name {
        width: 42%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>